<style>
    .box{
        margin-top: 20px;
        margin-left: 20px;
    }
    .sum{
        float: right;
        margin-right: 20px;
        line-height: 32px;
    }
    .quanxian{
        display: inline-block;
        width: 200px;
    }
    .addquanxian{
        display: inline-block;
        float: left;
    }
    .juzhong{
        width: 270px;
        margin: 0 auto;
    }
</style>
<div class="box">
    <button class="layui-btn layui-btn-normal addquanxian">添加权限节点</button>

    <div class="layui-input-block juzhong">
        <input type="text" name="title" autocomplete="off" placeholder="请输入权限名称" class="layui-input quanxian">
        <button class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe615;</i></button>
    </div>

    <span class="sum">共有数据：<strong>23</strong> 条</span>
</div>
<div class="layui-fluid">
    <table class="layui-table" style="text-align: center">

        <thead>
        <tr>
            <th style="text-align: center" width="6%">ID</th>
            <th style="text-align: center">权限名称</th>
            <th style="text-align: center">模块名称</th>
            <th style="text-align: center">控制器名称</th>
            <th style="text-align: center">方法名称</th>
            <th style="text-align: center" width="8%">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>贤心</td>
            <td>汉族</td>
            <td>1989-10-14</td>
            <td>人生似修行</td>
            <td>人生似修行</td>
            <td>
                <a href=""><i class="layui-icon">&#xe642;</i></a>
                <a href=""><i class="layui-icon">&#xe640;</i></a>
            </td>
        </tr>
        <tr>
            <td>张爱玲</td>
            <td>汉族</td>
            <td>1920-09-30</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
            <td>
                <a href=""><i class="layui-icon">&#xe642;</i></a>
                <a href=""><i class="layui-icon">&#xe640;</i></a>
            </td>
        </tr>
        <tr>
            <td>Helen Keller</td>
            <td>拉丁美裔</td>
            <td>1880-06-27</td>
            <td>1880-06-27</td>
            <td>1880-06-27</td>
            <td>
                <a href=""><i class="layui-icon">&#xe642;</i></a>
                <a href=""><i class="layui-icon">&#xe640;</i></a>
            </td>
        </tr>
        <tr>
            <td>岳飞</td>
            <td>汉族</td>
            <td>1103-北宋崇宁二年</td>
            <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
            <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
            <td>
                <a href=""><i class="layui-icon">&#xe642;</i></a>
                <a href=""><i class="layui-icon">&#xe640;</i></a>
            </td>
        </tr>
        <tr>
            <td>孟子</td>
            <td>华夏族（汉族）</td>
            <td>公元前-372年</td>
            <td>猿强，则国强。国强，则猿更强！</td>
            <td>猿强，则国强。国强，则猿更强！</td>
            <td>
                <a href=""><i class="layui-icon">&#xe642;</i></a>
                <a href=""><i class="layui-icon">&#xe640;</i></a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    layui.use(['layer'],function () {
        var layer = layui.layer;
        $('.addquanxian').click(function () {
            layer.open({
                type: 2,
                title: '添加权限节点',
                shadeClose: true,
                shade: 0.5,
                maxmin: true, //开启最大化最小化按钮
                area: ['550px', '400px'],
                content: '/index.php/home/privilege/add'
            });
        })
    });



</script>